<template>
    <div class="address">
        <p>
            <span>收货人</span> <input type="text" v-model="addperson" maxlength="15"></p>
        <p>
            <span>联系电话</span> <input type="text" v-model="addtel" @keyup="keyup"></p>
        <p>
            <span>所在地区</span>
            <span class="q" @click="address"><input type="text" readonly placeholder="请选择" value="" ref="address" v-model="addarea"><img src="../../assets/rightback.png" alt=""></span>
        </p>
        <div class="more">
            <textarea id="" placeholder="请填写详细地址，不少于5字" maxlength="40" v-model="adddetail"></textarea>
        </div>
        <p>
            <span>设为默认</span>
            <mt-switch v-model="qqq" @change="chekedchange"></mt-switch>
        </p>
        <mt-popup v-model="popupVisible" position="bottom" class="bottom">
            <p>
                <span @click="hidden">取消</span>
                <span @click="show">确定</span>
            </p>
            <mt-picker :slots="slots" @change="onValuesChange" class="qq" :visible-item-count="5"></mt-picker>
        </mt-popup>
        <div class="buttonbox" ref="buttonbox" @click="addresult">
            确定修改
        </div>
    </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import {
    getProvince,
    getCity,
    getArea,
    addAddress,
    queryDetailsAddress,
    editDetailsAddress
} from "src/methods/request.js";
export default {
    data() {
        return {
            route: {},
            addarea: "",
            addperson: "",
            addtel: "",
            adddetail: "",
            addcheced: "",
            qqq: false,
            slots: [
                {
                    flex: 1,
                    values: [],
                    className: "slot1",
                    textAlign: "center"
                },
                {
                    divider: true,
                    content: "-",
                    className: "slot2"
                },
                {
                    flex: 1,
                    values: [],
                    className: "slot3",
                    textAlign: "center"
                },
                {
                    divider: true,
                    content: "-",
                    className: "slot4"
                },
                {
                    flex: 1,
                    values: [],
                    className: "slot5",
                    textAlign: "center"
                }
            ],
            popupVisible: false,
            provinceList: [],
            provinceName: [],
            provinceCode: [],
            CityList: [],
            cityName: [],
            cityCode: [],
            AreaList: [],
            areaName: [],
            areaCode: [],
            provinceScroll: "",
            cityScroll: "",
            areaScroll: "",
            reults: "",
            myprovinceCodes: "",
            mycityCodes: "",
            myareaCodes: ""
        };
    },
    created() {
        this.route = Object.assign({}, this.$route);
        console.log(1111)
    },
    mounted() {
        console.log(1111)
        // this.$nextTick(() => {
        //   setTimeout(() => {//这个是一个初始化默认值的一个技巧
        //     this.addressSlots[0].defaultIndex = 0;
        //   }, 100);
        // });
    },
    methods: {
        getaddress() {
            let routerParams = this.route.query.id;
            //详细地址查询
            queryDetailsAddress({ id: routerParams })
                .then(response => {
                    let detailsjson = Object.assign({}, response.data);
                    console.log(detailsjson);
                    //进行赋值 // 0是 1fasle
                    this.addperson = detailsjson.contact;
                    this.addtel = detailsjson.phone;
                    this.adddetail = detailsjson.address;
                    this.addarea =
                        detailsjson.provinceName +
                        detailsjson.cityName +
                        detailsjson.areaName;
                    this.myprovinceCodes = detailsjson.provinceCode;
                    this.mycityCodes = detailsjson.cityCode;
                    this.myareaCodes = detailsjson.areaCode;
                    if (detailsjson.isDefault == 0) {
                        this.qqq = true;
                    } else {
                        this.qqq = false;
                    }
                    //  this.addperson = detailsjson.contact
                })
                .catch(error => console.log(error));
        },
        //checked 点击
        chekedchange() {
            console.log(this.qqq);
        },
        //所在地区点击
        address() {
            this.popupVisible = true;
            // console.log(this.slots[0].values)
            var self = this;
            //获取默认省市区
            getProvince({})
                .then(response => {
                    this.provinceList = Object.assign(
                        [],
                        response.data.provinceList
                    );
                    // console.log(this.provinceList)
                    // 图片加域名
                    for (var item of this.provinceList) {
                        this.provinceName.push(item.provinceName);
                        this.provinceCode.push(item.provinceCode);
                        //  console.log(this.provinceName)
                    }
                    // console.log(this.provinceName)
                    this.slots[0].values = this.provinceName;

                    // console.log(this.provinceCode,"11212")
                    getCity({ provinceCode: this.provinceCode[0] })
                        .then(response => {
                            this.CityList = Object.assign(
                                [],
                                response.data.cityList
                            );
                            // console.log(this.CityList)

                            for (var item of this.CityList) {
                                this.cityName.push(item.cityName);
                                this.cityCode.push(item.cityCode);
                            }
                            this.slots[2].values = this.cityName;

                            //区
                            getArea({ cityCode: this.cityCode[0] })
                                .then(response => {
                                    this.AreaList = Object.assign(
                                        [],
                                        response.data.areaList
                                    );
                                    // console.log(this.AreaList)

                                    for (var item of this.AreaList) {
                                        this.areaName.push(item.areaName);
                                        this.areaCode.push(item.areaCode);
                                    }
                                    this.slots[4].values = this.areaName;
                                })
                                .catch(error => console.log(error));
                            //区
                            this.provinceName = [];
                            this.provinceCode = [];
                            this.cityName = [];
                            this.cityCode = [];
                            this.areaName = [];
                            this.areaCode = [];
                        })
                        .catch(error => console.log(error));
                })
                .catch(error => console.log(error));
        },
        //省份变化
        provinceChange() {
            // console.log(this.provinceList[this.provinceScroll].provinceCode)
            getCity({
                provinceCode: this.provinceList[this.provinceScroll]
                    .provinceCode
            })
                .then(response => {
                    this.CityList = Object.assign([], response.data.cityList);
                    // console.log(this.CityList)

                    for (var item of this.CityList) {
                        this.cityName.push(item.cityName);
                        this.cityCode.push(item.cityCode);
                    }
                    this.slots[2].values = this.cityName;
                    this.cityName = [];
                    this.cityCode = [];
                })
                .catch(error => console.log(error));
        },
        //市区变化
        cityChange() {
            // console.log(this.CityList[this.cityScroll].cityCode)
            getArea({ cityCode: this.CityList[this.cityScroll].cityCode })
                .then(response => {
                    this.AreaList = Object.assign([], response.data.areaList);

                    for (var item of this.AreaList) {
                        this.areaName.push(item.areaName);
                        this.areaCode.push(item.areaCode);
                    }
                    this.slots[4].values = this.areaName;
                    this.areaName = [];
                    this.areaCode = [];
                })
                .catch(error => console.log(error));
        },
        onValuesChange(picker, values) {
            var self = this;
            //省
            for (var i = 0; i < this.slots[0].values.length; i++) {
                if (this.slots[0].values[i] == picker.getSlotValue(0)) {
                    self.provinceScroll = i;
                    self.provinceChange();
                    // return;
                }
            }
            //市
            for (var i = 0; i < this.slots[2].values.length; i++) {
                if (this.slots[2].values[i] == picker.getSlotValue(1)) {
                    self.cityScroll = i;
                    self.cityChange();
                    // return;
                }
            }
            //县
            for (var i = 0; i < this.slots[4].values.length; i++) {
                if (this.slots[4].values[i] == picker.getSlotValue(2)) {
                    self.areaScroll = i;
                    // return;
                }
            }

            this.reults =
                picker.getSlotValue(0) +
                picker.getSlotValue(1) +
                picker.getSlotValue(2);
        },
        //取消
        hidden() {
            this.popupVisible = false;
            this.provinceList = [];
            this.CityList = [];
            this.AreaList = [];
        },
        // 确定
        show() {
            this.popupVisible = false;
            this.addarea = this.reults;
        },
        keyup() {
            this.addtel = this.addtel.replace(/[^0-9]/g, "");
        },
        addresult() {
            if (this.adddetail.length < 5) {
                MessageBox("", "详细地址不少于5字");
                return;
            }
            if (this.addarea == "") {
                MessageBox("", "请选择所在地区");
                return;
            }
            if (this.addtel == "") {
                MessageBox("", "请填写正确手机号码");
                return;
            }
            if (this.addperson == "") {
                MessageBox("", "请填写收货人");
                return;
            }

            if (
                (this.provinceList || this.CityList || this.AreaList).length ==
                0
            ) {
                var myprovinceCode = this.myprovinceCodes;
                var mycityCode = this.mycityCodes;
                var myareaCode = this.myareaCodes;
                console.log("1111", myprovinceCode, mycityCode, myareaCode);
            } else {
                var myprovinceCode = this.provinceList[this.provinceScroll]
                    .provinceCode;
                var mycityCode = this.CityList[this.cityScroll].cityCode;
                var myareaCode = this.AreaList[this.areaScroll].areaCode;
            }

            // 0是 1fasle
            let isdefault;
            if (this.qqq) {
                isdefault = 0;
            } else {
                isdefault = 1;
            }
            let routerParams = this.route.query.id;
            editDetailsAddress({
                id: routerParams,
                contact: this.addperson,
                address: this.adddetail,
                phone: this.addtel,
                isDefault: isdefault,
                provinceCode: myprovinceCode,
                cityCode: mycityCode,
                areaCode: myareaCode
            })
                .then(response => {
                    console.log(response.rspCode);
                    if (response.rspCode == "0000") {
                        this.$router.push({
                            path: "/shopAddressManage",
                            query: {}
                        });
                    } else {
                        MessageBox("", "提交失败");
                    }
                })
                .catch(error => console.log(error));
        }
    },
    watch: {
        route() {
            if (this.route.path == "/shopAddresseditor") {
                this.getaddress();
            }
        },
        adddetail(){
            if(this.adddetail.length>40){
                this.addetail && (this.addetail = this.addetail.slice(0,40));
            }
        },
        addperson(){
            if(this.addperson.length>15){
                this.addperson && (this.addperson = this.addperson.slice(0,15));
            }
        }
    }
};
</script>


<style lang="less" scoped>
.address {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 16px;
    .more {
        height: 6rem;
        text-align: left;
        border-bottom: 1px solid #f1f0f0;
        textarea {
            font-size: 16px;
            width: 100%;
            height: 100%;
            resize: none;
            border: 0;
            outline: none;
            word-break: break-all;
            border-bottom: 1px solid #f1f0f0;
        }
    }
    p {
        height: 4rem;
        width: 100%;
        // background-color: red;
        border-bottom: 1px solid #f1f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        input {
            width: 75%;
            height: 2rem;
            text-align: right;
        }
        img {
            width: 20px;
            height: 0.8rem;
        }
        .q {
            position: relative;
            width: 75%;
            text-align: right;
            input {
                width: 91%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .buttonbox {
        margin-top: 20px;
        margin-left: 4.5%;
        width: 91%;
        color: #fff;
        height: 40px;
        background-color: #ed6e36;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
    }
    .fixed {
        position: fixed;
        bottom: 30px;
        left: 0px;
    }
    .qq {
        width: 100%;
    }
    .bottom {
        width: 100%;
        .qq {
            width: 100%;
            background-color: #f1f0f0;
        }
        p {
            border-top: 1px solid #f1f0f0;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            color: rgb(60, 60, 175);
        }
    }
}
</style>

